<template>
  <div
    style="width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;transition: background-color .3s;gap: 8px;flex-direction: column;"
    :style="{
      backgroundColor: backgroundColor
    }">
    <btn @click="() => {
      count++
    }">count：{{ count }}</btn>
    <btn @click="() => {
      backgroundColor = 'red'
    }">红</btn>
    <btn @click="() => {
      backgroundColor = 'orange'
    }">橙</btn>
    <btn @click="() => {
      backgroundColor = 'yellow'
    }">黄</btn>
    <btn @click="() => {
      backgroundColor = 'green'
    }">绿</btn>
    <btn @click="() => {
      backgroundColor = 'blue'
    }">蓝</btn>
    <btn @click="() => {
      backgroundColor = 'purple'
    }">紫</btn>
    <btn @click="() => {
      backgroundColor = 'white'
    }">白</btn>
    <btn @click="() => {
      backgroundColor = 'gray'
    }">灰</btn>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import btn from './components/btn.vue'

const backgroundColor = ref('red')
const count = ref(0)

onMounted(async () => {

})
</script>

<style scoped></style>